<template>
  <div>
    <div id="container" style="height: 100vh;" @click="ToNewHome()"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';

export default {
  name:'global',
  data() {
    return {
      ROOT_PATH: 'https://echarts.apache.org/examples',
      option: {
        backgroundColor: "#000",
        globe: {
          baseTexture:require('../assets/global/map.jpg'),
          heightTexture:require('../assets/global/map.jpg'),
          displacementScale: 0.04,
          shading: "realistic",
          environment:require('../assets/global/starfield.jpg'),
          realisticMaterial: {
            roughness: 0.9,
          },
          postEffect: {
            enable: true,
          },
          light: {
            main: {
              intensity: 2,
              shadow: true,
            },
            ambientCubemap: {
              texture:'../assets/global/pisa.hdr' ,
              diffuseIntensity: 0.2,
            },
          },
        },
      },
    };
  },
  mounted() {
    let chartDom = document.getElementById('container');
    let myChart = echarts.init(chartDom);
    if (this.option && typeof this.option === 'object') {
      myChart.setOption(this.option);
    }
  },
  methods:{
    ToNewHome(){
      this.$router.push('/newHome')
    }
  }
};
</script>

<style scoped>
</style>
